<!--  -->
<template>
  <el-upload
    class="avatar-uploader"
    action="/prod-api/user/uploadAvatar"
    :on-change="handleChange"
    accept=".jpg,jpeg,.png,.gif,.bmp,.ico,.tif,.tiff,.svg,.webp"
    :show-file-list="false"
    :data="{ userId: userStore.UserInfo.userId }"
    :headers="onHeaders"
  >
    <template #default>
      <el-avatar v-if="avatar" class="avatar-imgae" :size="100" :src="avatar" />
      <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
    </template>
  </el-upload>
  <!-- {{ onHeaders }} -->
</template>

<script setup>
import { reactive, ref } from 'vue'
import { useUserStore } from '@/stores/index'
const userStore = useUserStore()
const onHeaders = reactive({
  Authorization: localStorage.getItem('Authorization')
})
const avatar = ref(userStore.UserInfo.avatar)

//上传同时回显
const handleChange = (uploadFile) => {
  //本地回显
  const reader = new FileReader()
  //将文件转换为二进制图片
  reader.readAsDataURL(uploadFile.raw)
  reader.onload = (e) => {
    //图片回显
    // console.log(e.target)
    avatar.value = e.target.result
  }
  userStore.UserInfo.avatar = avatar.value
}
</script>

<style lang="scss" scoped>
.avatar-uploader .el-upload {
  .el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 200px;
    height: 200px;
    text-align: center;
    border: 1px dashed var(--el-border-color);
    border-radius: 100px;
  }
  .el-icon.avatar-uploader-icon:hover {
    border-color: rgb(116, 113, 113);
  }
}
.avatar-imgae::after {
  content: '🏞️点击修改头像';
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: larger;
  font-weight: 900;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: rgba(59, 58, 58, 0.534);
  opacity: 0;
  text-align: center;
}
.avatar-imgae:hover::after {
  opacity: 1;
}
</style>
